<template>
  <div class="dljjc_box3_x" content-style="padding:0;">
    <m_select :select="val.select" :click="ct.select_click" :qs="val.qs" :op="val.op">
    </m_select>

    <!-- 数据列表 -->

    <div class="role_rank_div">
      <n-grid
        :y-gap="cfg.mobile == false ? 15 : 6"
        :x-gap="cfg.mobile == false ? 15 : 6"
        :cols="parseInt(cfg.sswd / 130)"
      >
        <template v-for="item in val.pt_data">
          <n-gi v-if="item.bfb >= 0">
            <div class="role_rank_box">
              <div style="margin-right: 6px">
                <img style="width: 40px" :src="$cfg.function.ava(item.role)" />
              </div>
              <span style="color: var(--base-font-color)">{{ item.bfb }}% </span>
            </div>
          </n-gi>
        </template>
      </n-grid>
    </div>

    <br />
  </div>
</template>

<script>
//2024/07/09 猫燐
import { cfg } from "@/cfg/cfg.js";
import m_load from "@/comp/m_load.vue";
import m_select from "@/comp/m_select.vue";

export default {
  components: {
    m_load,
    m_select,
  },
  setup() {
    let ct = reactive({});

    //下拉菜单赛季选择
    ct.select_click = async () => {
      try {
        val.show = true;
        val.loading_text = `[Loading] 读取公会数据中... ( ${val.sepint} / ${val.maxint} )`;
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "get/auto/gf_role_rank",
            season: val.qs.season,
            boss: val.qs.boss,
          },
        });
        const data = res.data;

        val.op.boss = [
          {
            value: "all",
            label: "所有boss",
          },
        ];
        for (let key in data.boss) {
          val.op.boss.push({
            value: key,
            label: key,
          });
        }

        if (data.code == 0) {
          val.pt_data = data.data;
        } else {
          cfg.msg.error(data.msg);
          val.show = false;
          return;
        }

        val.show = false;
      } catch (error) {
        val.show = false;
        cfg.msg.error(error);
        return false;
      }
    };

    let val = reactive({
      pt_data: [],
      coldw: cfg.mobile == true ? 140 : 140,
      pgwd: cfg.mobile == true ? 45 : 45,
      col: 1,
      colwd: 1,
      show: true,
      loading_text: "加载中(text)",
      //选择菜单选中
      qs: {
        season: null,
        boss: null,
      },
      //选择菜单列表
      op: {
        season: [],
      },
    });

    val.select = [
      {
        tips: "选择赛季",
        val: "season",
        width: 15,
        mwidth: 10,
      },
      {
        tips: "选择boss",
        val: "boss",
        width: 10,
        mwidth: 10,
      },
    ];

    //初始化
    onMounted(async () => {
      val.sepint++;
      val.loading_text = `[Loading] 读取赛季信息中... ( ${val.sepint} / ${val.maxint} )`;
      await cfg.function.season_list();
      val.op.season = cfg.season.select;
      if (cfg.route.query.season != null) {
        val.qs.season = cfg.route.query.season;
      } else {
        val.qs.season = cfg.season.select[0].value;
      }
      val.qs.boss = "all";
      await ct.select_click();
      val.show = false;
      const layBodyElement = document.querySelector(".v2_body");
      cfg.sswd = layBodyElement.offsetWidth;
      val.col = parseInt(cfg.sswd / val.coldw);
      val.pgs = parseInt(cfg.sswd / val.pgwd);
    });

    watch(
      () => cfg.sswd,
      (newWidth, oldWidth) => {
        val.col = parseInt(cfg.sswd / val.coldw);
        val.pgs = parseInt(cfg.sswd / val.pgwd);
      }
    );

    return {
      cfg,
      val,
      ct,
    };
  },
};
</script>
